<form action="/sysmanage/device/edit.do" class="datagrid-edit-form" data-toggle="validate" >
<div class="bjui-row col-2 ">
    <label class="row-label">sn</label>
    <div class="row-input required">
        <input type="text" id="device-sn" name="sn" data-rule="required">
    </div>
    <label class="row-label">设备名称</label>
    <div class="row-input">
        <input type="text" id="device-devicename" name="devicename">
    </div>
    <label class="row-label">设备imei</label>
    <div class="row-input">
        <input type="text" id="device-imei" name="imei">
    </div>
    <label class="row-label">imsi</label>
    <div class="row-input">
        <input type="text" id="device-imsi" name="imsi">
    </div>
    <label class="row-label">设备信息</label>
    <div class="row-input">
        <input type="text" id="device-deviceinfo" name="deviceinfo">
    </div>
    <label class="row-label">设备型号</label>
    <div class="row-input">
        <input type="text" id="device-deviceModel" name="devicemodel">
    </div>
    <label class="row-label ">上限值</label>
    <div class="row-input required">
        <input type="text" id="device-upper" name="upper" class="w-bfz80" data-rule="required" value="5">
        <span class="c76838f">米</span>
    </div>
    <label class="row-label ">下限值</label>
    <div class="row-input required">
        <input type="text" id="device-lower" name="lower" class="w-bfz80" data-rule="required" value="3">
        <span class="c76838f">米</span>
    </div>
    <label class="row-label ">上报周期</label>
    <div class="row-input required">
        <input type="text" id="device-reportCycle" name="reportCycle" class="w-bfz80" data-rule="required" value="60">
        <span class="c76838f">分钟</span>
    </div>
    <label class="row-label ">采样周期</label>
    <div class="row-input required">
        <input type="text" id="device-sampleCycle" name="sampleCycle" class="w-bfz80" data-rule="required"  value="5">
        <span class="c76838f">分钟</span>
    </div>
    <label class="row-label">设备位置</label>
    <div class="row-input">
        <input type="text" id="device-location" name="location" autocomplete="off">
    </div>
    <div id="searchResult" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    <label class="row-label">所属用户</label>
    <div class="row-input">
        <select data-toggle="selectpicker" id="deviceOwner" data-width="290" name="ownerid">
            <option value=""></option>
        </select>
    </div>

    <input type="hidden" id="device-lat" name="lat">
    <input type="hidden" id="device-lng" name="lng">
    <input type="hidden" id="device-ownerid">
    <input type="hidden" id="device-getsn" value="${sn}">
</div>
<div id="map" style="margin-top: 10px;">
    <div style="width:86%;height:360px; margin-left:11%;border:#ccc solid 1px;font-size:12px" id="devicemap"></div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li>
            <button type="button" class="btn-close" data-icon="close">取消</button>
        </li>
        <li>
            <button type="submit" class="btn-default " id="addNewFresh" data-icon="save">保存</button>
        </li>
    </ul>
</div>
</form>
<script>
    var addMap;
    var marker;
    var device_location;
    function setMapPlace(spinnerValue){
        addMap.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            addMap.centerAndZoom(pp, 18);
            marker=new BMap.Marker(pp);
            $("#device-lng").val(pp.lng);
            $("#device-lat").val(pp.lat);
            addMap.addOverlay(marker);    //添加标注
            draggingMethod();
        }
        var local = new BMap.LocalSearch(addMap, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(spinnerValue);
    }

    function mapMethod() {
        addMap = new BMap.Map("devicemap");
        var point;
        var getLng=$("#device-lng").val();
        var getLat=$("#device-lat").val();
        var sn = $("#device-getsn").val();
        if (sn!=null&&sn!=""){
            addMap.centerAndZoom(new BMap.Point(getLng, getLat), 12);
        }else{
            addMap.centerAndZoom(new BMap.Point(${centerLng}, ${centerLat}), 12);
        }
        addMap.enableScrollWheelZoom(true);// 初始化地图,设置城市和地图级别。

        if(getLng!="" && getLat!=""){
            point= new BMap.Point(getLng,getLat);
            marker=new BMap.Marker(point,18);
            addMap.addOverlay(marker);
            draggingMethod();
        }else{
            point= new BMap.Point(${centerLng},${centerLat});
            marker=new BMap.Marker(point,18);
            addMap.addOverlay(marker);
            draggingMethod();
            $("#device-location").val("");
        }
        var spinnerValue;
        var abc = new BMap.Autocomplete(    //建立一个自动完成的对象
                {"input" : "device-location"
                    ,"location" : addMap
                });
        if (sn!=null&&sn!=""){
            abc.setInputValue(device_location);
        }
        pullDownEvents(abc,"searchResult");
        abc.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            spinnerValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            G("searchResult").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />spinnerValue = " + spinnerValue;

            setMapPlace(spinnerValue);
        });

    }
    function draggingMethod() {
        marker.enableDragging();
        marker.addEventListener("dragend", function (e) {
            var pt=e.point;
            $("#device-lng").val(e.point.lng);
            $("#device-lat").val(e.point.lat);
        })
    }

    $(function () {
        getdata();
        mapMethod();
        $("#addNewFresh").click(function () {
            BJUI.navtab('refresh', 'deviceinfo')
        })
    });

    function getdata() {
        var sn = $("#device-getsn").val();

        if (sn!=null&&sn!=""){
            //前台
            $.ajax({
                type: "POST",
                url: "/sysmanage/device/getmodule.do",
                data: {'sn': sn},
                cache: true,
                async: false,
                dataType: 'JSON',
                success: function (data) {
                    bindModule(data);
                }
            })
        }else {
            getdeviceowner();
        }
    }

    function getdeviceowner() {
        var options="";
        //前台
        $.ajax({
            type: "POST",
            url: "/sysmanage/customer/customerList.do",
            data: "",
            cache: true,
            async: false,
            dataType: 'JSON',
            success: function (data) {
                var ownerId=$("#device-ownerid").val();
                for (var i=0;i<data.length;i++) {
                    if (ownerId== data[i].id){
                        options += "<option selected='' value=" + data[i].id + ">" + data[i].name + "</option>";
                    }else {
                        options += "<option value=" + data[i].id + ">" + data[i].name + "</option>";
                    }
                }
                $("#deviceOwner").append(options);
            }
        })
    }

    function bindModule(data) {
        $("#device-sn").attr("readonly","true");
        $("#device-upper").attr("readonly","true");
        $("#device-reportCycle").attr("readonly","true");
        $("#device-lower").attr("readonly","true");
        $("#device-sampleCycle").attr("readonly","true");
        $("#device-sn").val(data.sn);
        $("#device-devicename").val(data.devicename);
        $("#device-imei").val(data.imei);
        $("#device-imsi").val(data.imsi);
        $("#device-deviceinfo").val(data.deviceinfo);
        $("#device-deviceModel").val(data.devicemodel);
        $("#device-lat").val(data.lat);
        $("#device-lng").val(data.lng);
        device_location=data.location;
        $("#device-upper").val(data.upper);
        $("#device-lower").val(data.lower);
        $("#device-reportCycle").val(data.reportCycle);
        $("#device-sampleCycle").val(data.sampleCycle);
        if(data.deviceownerByOwnerid!==undefined){
            $("#deviceOwner").val(data.deviceownerByOwnerid.name);
            $("#device-ownerid").val(data.deviceownerByOwnerid.id);
        }
        getdeviceowner();
    }



</script>
